<template>
  <div class="my-order">
    <div class="mo-main">
      <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
      >
        <el-tab-pane
            label="面料订单"
            name=3
        ></el-tab-pane>
        <el-tab-pane
            label="个定订单"
            name=0
        ></el-tab-pane>
        <el-tab-pane
            label="团体订单"
            name=1
        ></el-tab-pane>
        <el-tab-pane
            label="现货订单"
            name=2
        ></el-tab-pane>
      </el-tabs>
      <div>
        <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
        >

          <el-form-item>
            <el-date-picker
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                placeholder="选择日期"
                v-model="formInline.date"
                style="width: 100%;"
                value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>

          <el-form-item v-if="orderType==3">
            <el-input
                clearable
                v-model="fabricCode"
                placeholder="面料编号"
                style="width: 180px"></el-input>
          </el-form-item>

          <!--          <el-form-item v-if="orderType==3">-->
          <!--            <el-select-->
          <!--                clearable-->
          <!--                v-model="formInline.region"-->
          <!--                placeholder="选择订单状态"-->
          <!--            >-->
          <!--              <el-option-->
          <!--                  v-for="item in optionsList"-->
          <!--                  :key="item.sign"-->
          <!--                  :label="item.txt"-->
          <!--                  :value="item.value"-->
          <!--              ></el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->

          <!--          <el-form-item v-if="orderType!=3">-->
          <!--            <el-select-->
          <!--                clearable-->
          <!--                v-model="formInline.region"-->
          <!--                placeholder="选择订单状态"-->
          <!--            >-->
          <!--              <el-option-->
          <!--                  v-for="item in optionsListSingle"-->
          <!--                  :key="item.sign"-->
          <!--                  :label="item.txt"-->
          <!--                  :value="item.value"-->
          <!--              ></el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->

          <el-form-item v-if="orderType==1">
            <el-input
                clearable
                v-model="companyName"
                placeholder="公司名称"
                style="width: 180px"></el-input>
          </el-form-item>

          <el-form-item v-if="orderType==0">
            <el-input
                clearable
                v-model="cusname"
                placeholder="顾客姓名"
                style="width: 180px"></el-input>
          </el-form-item>

          <el-form-item>
            <el-input
                clearable
                v-model="emp"
                placeholder="下单员工"
                style="width: 180px"></el-input>
          </el-form-item>

          <!--          <el-form-item>-->
          <!--            <el-input-->
          <!--                clearable-->
          <!--                v-model="formInline.user"-->
          <!--                placeholder="请输入订单编号"-->
          <!--                style="width: 180px"></el-input>-->
          <!--          </el-form-item>-->

          <el-form-item>
            <el-button
                type="primary"
                @click="onSubmit()"
                style="float: left;background-color: #2D2D2D;color: #e88f09;">查询
            </el-button>
          </el-form-item>

          <el-form-item>
            <el-button
                type="primary"
                @click="clearSelect()"
                style="float: left;background-color: #2D2D2D;color: #e88f09;">重置
            </el-button>
          </el-form-item>

          <el-form-item>
            <a style="text-decoration: none;color:#ffe56d" :href='getExcel()' title="下载">
              <el-button
                  type="primary"
                  style="float: left;background-color: #2D2D2D;color: #e88f09;">导出
              </el-button>
            </a>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <!--面料下单的数据-->
        <el-table
            :stripe="true"
            :border="true"
            size="small"
            v-loading="loading"
            v-show="orderType==3"
            :data="tableData"
            :header-cell-style="{ background: '#F2F2F2', color: '#333333' }"
        >
          <el-table-column
              align="center"
              label="序号"
              type="index"
              width="50">
          </el-table-column>
          <el-table-column
              align="center"
              prop="orderSn"
              label="订单编号"
          >
          </el-table-column>

          <el-table-column
              align="center"
              prop="storeName"
              label="下单门店"
          >
          </el-table-column>
          <el-table-column
              align="center"
              prop="empName"
              label="下单员工"
          >
          </el-table-column>

          <el-table-column
              align="center"
              prop="createTime"
              label="下单时间"
          >
          </el-table-column>
          <!--<el-table-column
                  prop="buyNumber"
                  label="购买米数">
          </el-table-column>-->

          <!--          <el-table-column
                        prop="name"
                        label="收货人名称"
                    >
                    </el-table-column>-->

          <el-table-column
              align="center"
              prop="orderMoney"
              label="金额"
          >
          </el-table-column>
          <el-table-column
              align="center"
              prop="status"
              label="订单状态"
          >
            <template slot-scope="props">
              <span v-if="props.row.status==-1">已取消</span>
              <span v-if="props.row.status==0">待支付</span>
              <span v-if="props.row.status==1">下单成功</span>
              <span v-if="props.row.status==2">已提交</span>
              <span v-if="props.row.status==3">已接单</span>
              <span v-if="props.row.status==4">已发货</span>
              <span v-if="props.row.status==5">已完成</span>
              <span v-if="props.row.status==6">售后</span>
              <span v-if="props.row.status==7">售后（总后台）</span>
              <span v-if="props.row.status==8">总后台已确认</span>
              <span v-if="props.row.status==9">已驳回</span>
              <span v-if="props.row.status==10">备库</span>
              <span v-if="props.row.status==11">售后完成</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           fixed="right" label="操作">
            <template slot-scope="props">
              <el-button
                  type="text"
                  size="small"
                  :style="{color: '#C29C0F'}"
                  @click="getFabricDetail(props.row.orderSn)"
              >查看详情
              </el-button>

              <el-button
                  v-show="props.row.status!=0 && props.row.status!=9 && props.row.status!=-1 && props.row.status!=10
                          && props.row.status !=1 && props.row.status !=2 "
                  @click="ShouhouVisible = true,fabricAfter(props.row.orderSn),fabricOrderAafter(props.row.orderSn)"
                  type="text"
                  size="small"
                  :style="{color: '#C29C0F'}"
              >申请售后
              </el-button>
              <el-button
                  v-show="props.row.status==0 ||  props.row.status==10"
                  type="text"
                  size="small"
                  :style="{color: '#C29C0F'}"
                  @click="openquxiao(props.row.orderSn)"
              >取消订单
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--面料下单的数据结束-->
        <!--*******************************************************************************-->
        <!--个订下单数据列表开始-->
        <el-table
            :stripe="true"
            :border="true"
            size="small"
            v-loading="loading"
            width="100%"
            v-show="orderType==0"
            :data="tableData"
            :header-cell-style="{ background: '#F2F2F2', color: '#333333' }"
        >
          <el-table-column
              align="center"
              label="序号"
              type="index"
              width="50">
          </el-table-column>

          <el-table-column
              align="center"
              prop="customerName"
              label="顾客名称"
          >
          </el-table-column>

          <el-table-column
              :show-overflow-tooltip="true"
              align="center"
              prop="orderSn"
              label="订单编号"
          >
          </el-table-column>
          <!--          <el-table-column
                        prop="orderName"
                        label="订单名称"
                    >
                    </el-table-column>-->
          <el-table-column
              align="center"
              prop="storeName"
              label="下单门店"
          >
          </el-table-column>
          <el-table-column
              align="center"
              prop="empName"
              label="下单员工"
          >
          </el-table-column>
          <el-table-column
              :show-overflow-tooltip="true"
              align="center"
              prop="createTime"
              label="下单时间"
          >
          </el-table-column>

          <el-table-column
              align="center"
              prop="customerCode"
              label="顾客订单编号"
          >
          </el-table-column>
          <el-table-column
              align="center"
              prop="orderMoney"
              label="金额"
          >
          </el-table-column>
          <el-table-column
              align="center"
              prop="status"
              label="订单状态"
          >
            <template slot-scope="props">
              <span v-if="props.row.status==1">下单成功</span>
              <span v-if="props.row.status==2">已提交</span>
              <span v-if="props.row.status==3">已接单</span>
              <span v-if="props.row.status==4">等待面料</span>
              <span v-if="props.row.status==5">裁剪</span>
              <span v-if="props.row.status==6">缝制</span>
              <span v-if="props.row.status==7">发货</span>
              <span v-if="props.row.status==8">订单完成</span>
              <span v-if="props.row.status==9">售后</span>
              <span v-if="props.row.status==11">待支付</span>
              <span v-if="props.row.status==10">已驳回</span>
              <span v-if="props.row.status==12">售后完成</span>
            </template>
          </el-table-column>
          <!--<el-table-column prop="refusedReason" label="驳回原因"></el-table-column>-->
          <el-table-column align="center" fixed="right" label="操作">
            <template slot-scope="props">
              <el-button
                  @click="gotoSingleOrderDetail(props.row.orderSn)"
                  type="text"
                  size="small"
                  :style="{color: '#C29C0F'}"
              >查看详情
              </el-button>

              <el-button
                  v-if="props.row.status>=3 && props.row.status!=10 && props.row.status!=11"
                  @click="fanxiu(props.row.orderSn)"
                  type="text"
                  size="small"
                  :style="{color: '#C29C0F'}"
              >申请售后
              </el-button>
              <el-button
                  v-if="props.row.status=='11'"
                  type="text"
                  size="small"
                  :style="{color: '#C29C0F'}"
                  @click="openquxiao(props.row.orderSn)"
              >取消订单
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--个订下单数据列表结束-->
        <!--*************************************************************-->
        <!--团订列表数据-->
        <el-table
            :stripe="true"
            :border="true"
            size="small"
            v-loading="loading"
            v-show="orderType==1"
            :data="tableData"
            :header-cell-style="{ background: '#F2F2F2', color: '#333333' }"
        >
          <el-table-column
              align="center"
              label="序号"
              type="index"
              width="50">
          </el-table-column>

          <el-table-column
              align="center"
              prop="customerName"
              label="公司简称"
          >
          </el-table-column>

          <el-table-column
              :show-overflow-tooltip="true"
              align="center"
              prop="orderSn"
              label="订单编号"
          >
          </el-table-column>

          <el-table-column
              align="center"
              prop="storeName"
              label="下单门店"
          >
          </el-table-column>
          <el-table-column
              align="center"
              prop="empName"
              label="下单员工"
          >
          </el-table-column>

          <!--          <el-table-column
                        prop="orderName"
                        label="订单名称"
                    >
                    </el-table-column>-->
          <el-table-column
              :show-overflow-tooltip="true"
              align="center"
              prop="createTime"
              label="下单时间"
          >
          </el-table-column>

          <!--          <el-table-column
                        prop="customerCode"
                        label="公司代码"
                    >
                    </el-table-column>-->
          <el-table-column
              align="center"
              prop="orderMoney"
              label="金额"
          >
          </el-table-column>
          <el-table-column
              align="center"
              prop="status"
              label="订单状态"
          >
            <template slot-scope="props">
              <span v-if="props.row.status==1">下单成功</span>
              <span v-if="props.row.status==2">已提交</span>
              <span v-if="props.row.status==3">已接单</span>
              <span v-if="props.row.status==4">等待面料</span>
              <span v-if="props.row.status==5">裁剪</span>
              <span v-if="props.row.status==6">缝制</span>
              <span v-if="props.row.status==7">发货</span>
              <span v-if="props.row.status==8">订单完成</span>
              <span v-if="props.row.status==9">售后</span>
              <span v-if="props.row.status==10">已驳回</span>
              <span v-if="props.row.status==11">待支付</span>
              <span v-if="props.row.status==12">售后完成</span>
            </template>
          </el-table-column>

          <!--<el-table-column prop="refusedReason" label="驳回原因"></el-table-column>-->
          <el-table-column align="center" fixed="right" label="操作">
            <template slot-scope="props">
              <el-button
                  type="text"
                  size="small"
                  :style="{color: '#C29C0F'}"
                  @click="gotoTeamDetail(props.row.orderSn)"
              >查看详情
              </el-button>
              <el-button
                  v-if="props.row.status>=3 && props.row.status!=11"
                  @click="fanxiu(props.row.orderSn)"
                  type="text"
                  size="small"
                  :style="{color: '#C29C0F'}"
              >申请售后
              </el-button>
              <el-button
                  v-if="props.row.status=='11'"
                  type="text"
                  size="small"
                  :style="{color: '#C29C0F'}"
                  @click="openquxiao(props.row.orderSn)"
              >取消订单
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--现货下单的数据-->
        <el-table
            :stripe="true"
            :border="true"
            size="small"
            v-loading="loading"
            v-show="orderType==2"
            :data="tableData"
            :header-cell-style="{ background: '#F2F2F2', color: '#333333' }"
        >
          <el-table-column
              align="center"
              label="序号"
              type="index"
              width="50">
          </el-table-column>
          <el-table-column
              align="center"
              prop="orderSn"
              label="订单编号"
          >
          </el-table-column>

          <el-table-column
              align="center"
              prop="storeName"
              label="下单门店"
          >
          </el-table-column>
          <el-table-column
              align="center"
              prop="empName"
              label="下单员工"
          >
          </el-table-column>

          <el-table-column
              align="center"
              prop="createTime"
              label="下单时间"
          >
          </el-table-column>
          <!--<el-table-column
                  prop="buyNumber"
                  label="购买米数">
          </el-table-column>-->

          <!--          <el-table-column
                        prop="name"
                        label="收货人名称"
                    >
                    </el-table-column>-->

          <el-table-column
              align="center"
              prop="orderMoney"
              label="金额"
          >
          </el-table-column>
          <el-table-column
              align="center"
              prop="status"
              label="订单状态"
          >
            <template slot-scope="props">
              <span v-if="props.row.status==-1">已取消</span>
              <span v-if="props.row.status==0">待支付</span>
              <span v-if="props.row.status==1">下单成功</span>
              <span v-if="props.row.status==2">已提交</span>
              <span v-if="props.row.status==3">已接单</span>
              <span v-if="props.row.status==4">已发货</span>
              <span v-if="props.row.status==5">已完成</span>
              <span v-if="props.row.status==6">售后</span>
              <span v-if="props.row.status==7">售后（总后台）</span>
              <span v-if="props.row.status==8">总后台已确认</span>
              <span v-if="props.row.status==9">已驳回</span>
              <span v-if="props.row.status==10">备库</span>
              <span v-if="props.row.status==11">售后完成</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           fixed="right" label="操作">
            <template slot-scope="props">
              <!--              <el-button
                                type="text"
                                size="small"
                                :style="{color: '#C29C0F'}"
                                @click="getFabricDetail(props.row.orderSn)"
                            >查看详情
                            </el-button>-->

              <!--              <el-button
                                v-show="props.row.status!=0 && props.row.status!=9 && props.row.status!=-1 && props.row.status!=10
                                        && props.row.status !=1 && props.row.status !=2 "
                                @click="ShouhouVisible = true,fabricAfter(props.row.orderSn),fabricOrderAafter(props.row.orderSn)"
                                type="text"
                                size="small"
                                :style="{color: '#C29C0F'}"
                            >申请售后
                            </el-button>-->
              <el-button
                  v-show="props.row.status==0 ||  props.row.status==10"
                  type="text"
                  size="small"
                  :style="{color: '#C29C0F'}"
                  @click="openquxiao(props.row.orderSn)"
              >取消订单
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页插件-->
      <div class="mom-pagination">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="pageDetail.total"
            :page-size="10"
            @next-click="currentPage+=1,handleCurrentChange"
            @prev-click="currentPage-=1,handleCurrentChange"
            @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
        title="售后"
        :visible.sync="ShouhouVisible"
        width="466px"
        :close-on-click-modal="false"
    >
      <el-select
          v-model="ruleForm.type"
          placeholder="请选择售后方式！"
          :style="{marginBottom: '20px', width: '70%'}"
      >
        <el-option
            label="换货"
            value="1"
        >
        </el-option>
        <el-option
            label="退货"
            value="0"
        >
        </el-option>
      </el-select>
      <el-input
          type="textarea"
          :rows="6"
          placeholder="请填写售后原因"
          v-model="ruleForm.why"
          :style="{marginBottom: '20px', width: '100%'}"
      >
      </el-input>

      <el-input
          v-model="ruleForm.num"
          placeholder="请填写物流单号/物流单号只存在选择换货后才能出现"
      ></el-input>
      <span
          slot="footer"
          class="dialog-footer"
      >
        <el-button @click="ShouhouVisible = false,delAfter()">取 消</el-button>
        <el-button
            type="primary"
            @click="handleSubmit"
        >确 定</el-button>
      </span>
    </el-dialog>
    <div>
      <!--作用于面料订单的查看界面-->
      <el-drawer
          class="el-drawer__body"
          title="详细"
          size="40%"
          :with-header="false"
          :visible.sync="drawer"
          :direction="direction">
        <div style="height: 30px;line-height: 30px;left: 10px">
          <i class="el-icon-s-order">详细</i>
        </div>
        <div style="left: 10px" v-for="(item,key) in fabricOrderDetail" :key="item.id">

          <div style="margin-left: 10px">
            <!--左边的图片-->
            <div style="float: left">
              <el-image style="width: 153px;height: 158px;left: 10px;margin-top: 10px"
                        :src="item.fabricInfo.fabricImg"
                        :fit="fit">
              </el-image>
              <div class="fabricName">{{ item.fabricInfo.fabricName }}</div>
              <div class="fabricName">{{ item.fabricInfo.fabricCode }}</div>
            </div>
            <!--右边的表格-->
            <div style="display: inline-block;margin-left: 30px;margin-top: 10px">
              <table>
                <tr class="mytr">
                  <td class="fatitle">纱织</td>
                  <td class="facontent">{{ item.fabricInfo.fabricShazhi }}</td>
                </tr>
                <tr class="mytr">
                  <td class="fatitle">成分</td>
                  <td class="facontent">{{ item.fabricInfo.fabricContent }}</td>
                </tr>
                <tr class="mytr">
                  <td class="fatitle">克重</td>
                  <td class="facontent">{{ item.fabricInfo.fabricWeight }}</td>
                </tr>
                <tr class="mytr" v-show="false">
                  <td class="fatitle">花型</td>
                  <td class="facontent">8687</td>
                </tr>
                <tr class="mytr">
                  <td class="fatitle">颜色</td>
                  <td class="facontent">{{ item.fabricInfo.color }}</td>
                </tr>
                <tr class="mytr">
                  <td class="fatitle">样本</td>
                  <td class="facontent">{{ item.fabricInfo.fabricSample }}</td>
                </tr>
                <tr class="mytr">
                  <td class="fatitle">幅宽</td>
                  <td class="facontent">{{ item.fabricInfo.fabricWidth }}</td>
                </tr>
              </table>
            </div>
            <!--接下来是下面的大表格-->
            <div style="margin-top: 10px">
              <table style="width: 100%">
                <tr>
                  <td class="fabigtitle">米数</td>
                  <td class="fabigcontent">{{ item.buyNumber }}</td>
                </tr>
                <tr>
                  <td class="fabigtitle">标准单价</td>
                  <td class="fabigcontent">{{ item.fabricInfo.fabricPrice }}</td>
                </tr>
                <tr v-show="item.fabricInfo.kehuzk!='1'">
                  <td class="fabigtitle">客户折扣</td>
                  <td class="fabigcontent">{{ item.fabricInfo.kehuzk }}</td>
                </tr>
                <tr>
                  <td class="fabigtitle">实际单价</td>
                  <td class="fabigcontent">{{ item.fabricInfo.afterPrice }}</td>
                </tr>
                <tr>
                  <td class="fabigtitle">面料价格</td>
                  <td class="fabigcontent">{{ item.totalAmount }}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </el-drawer>

      <!--取消订单的弹框-->
      <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
      >
        <span>确定取消订单吗？</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false,delFabricOrder()">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>

import {getAction} from "../../api/manage";

export default {
  created() {
    this.howOrder()
    this.getDate()
  },
  data() {
    return {
      // 面料编号
      fabricCode: '',
      // 下单员工姓名
      emp: '',
      // 个定：顾客姓名
      cusname: '',
      // 团定：公司名称
      companyName: '',
      loading: false,
      autohor_token: localStorage.getItem("token"), //token
      fabricOrderDetail: [],
      fit: 'fill',
      src: "https://cn.bing.com/th?id=OHR.PisgahNationalForest_ZH-CN0944504238_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp",
      drawer: false,
      direction: 'rtl',
      currentPage: 1, // 分页，当前页
      pageDetail: {},
      clickOrderSn: '', // 售后选中的订单ID
      orderType: 3,
      dialogVisible: false, // 取消订单是否显示弹框
      quxiaoSn: '', // 取消的订单编号
      url: {
        // 数据接口
        list: "/Order/getOrderList",
        // 表格接口
        excellist: "/Order/getOrderExcel",
        // 面料售后
        fabricAfter: "/Order/fabricAfterSales",
        // 个订订单售后
        singleAfter: "/Order/SingleOrderAfter",
        // 团订售后
        teamOrderAfter: "/Order/teamOrderAfter",
        // 面料详情
        fabricDetail: "/cart/getFabricOrderDetail",
        // 取消订单
        delOrder: '/Order/delOrder'
      },
      activeName: '3',
      // 面料订单状态
      optionsList: [
        {sign: "options000", txt: "已完成", value: "5"},
        {sign: "options001", txt: "待支付", value: "0"},
        {sign: "options002", txt: "下单成功", value: "1"},
        {sign: "options003", txt: "已接单", value: "3"},
        {sign: "options004", txt: "已驳回", value: "9"},
        {sign: "options005", txt: "备库", value: "10"},
        {sign: "options006", txt: "已发货", value: "4"},
        {sign: "options007", txt: "售后", value: "6"},
      ],
      // 个订订单状态
      optionsListSingle: [
        {sign: "options000", txt: "待支付", value: "11"},
        {sign: "options001", txt: "下单成功", value: "1"},
        // {sign: "options002", txt: "已提交", value: "2"},
        {sign: "options003", txt: "已接单", value: "3"},
        {sign: "options004", txt: "售后", value: "9"},
        {sign: "options005", txt: "订单完成", value: "8"},
        {sign: "options006", txt: "已驳回", value: "10"},
      ],
      ShouhouVisible: false,
      ruleForm: {
        type: "",
        why: "",
        num: "",
      },
      formInline: {
        user: "",
        region: "",
        date: "",
      },
      tableData: [
        // {
        //     index: "1",
        //     num: "2334921264AQ",
        //     time: "2020-06-01",
        //     mendian: "2264AA",
        //     money: "3600",
        //     type: "待付款",
        //     why: "拒绝原因",
        // }
      ]
    };
  },
  methods: {

    /**
     * 从订单详情过来的时候，要定位到具体的订单界面
     */
    howOrder() {
      if (this.$route.query.orderType != null) {
        this.activeName = this.$route.query.orderType
        this.orderType = this.$route.query.orderType
      }
    },

    // 重置查询条件
    clearSelect() {
      this.formInline.user = ''
      this.formInline.region = ''
      this.formInline.date = ''
      this.fabricCode = ''
      this.emp = ''
      this.cusname = ''
      this.companyName = ''
      this.getDate()
    },

    getDate() { // 获取数据
      this.loading = true
      getAction(domain.publicUrl + this.url.list, {
        'token': this.autohor_token,
        'orderType': this.orderType
      }).then(res => {
        this.loading = false
        this.pageDetail = res.data.data
        this.tableData = res.data.data.records
      })
    },
    // 打开取消顶订单的弹框
    openquxiao(orderSn) {
      this.dialogVisible = true
      this.quxiaoSn = orderSn
    },
    // 真正的取消订单
    delFabricOrder() {
      getAction(domain.publicUrl + this.url.delOrder, {
        'token': this.autohor_token,
        'orderType': this.orderType,
        'orderSn': this.quxiaoSn
      }).then(res => {
        if (res.data.code == '0') {
          this.$message.success(res.data.msg)
          this.getDate()
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    // 关闭右侧弹出框
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    getExcel() {
      if (this.orderType == 3) { // 面料订单
        return domain.publicUrl + '/Order/getFabricOrderExcel' + '?token=' + this.autohor_token
      } else if (this.orderType == 0) { // 个订
        return domain.publicUrl + this.url.excellist + '?token=' + this.autohor_token
      } else if (this.orderType == 1) { // 团订
        return domain.publicUrl + '/Order/getTeamOrderExcel' + '?token=' + this.autohor_token
      }
    },
    /*// 这里切换订单类型
    checkOrderType(orderType) {
        this.orderType = orderType;
    },*/
    // 请求各种订单
    getOrder() {
      this.loading = true
      getAction(domain.publicUrl + this.url.list, {
        'token': this.autohor_token,
        'orderType': this.orderType
      }).then(res => {
        this.loading = false
        this.tableData = res.data.data.records
      })
    },
    // 切换标签卡
    handleClick(tab, event) {
      this.tableData = []
      this.orderType = tab.name
      this.formInline.user = ''
      this.formInline.region = ''
      this.formInline.date = ''

      this.loading = true
      getAction(domain.publicUrl + this.url.list, {
        'token': this.autohor_token,
        'orderType': this.orderType
      }).then(res => {
        this.loading = false
        this.pageDetail = res.data.data
        this.tableData = res.data.data.records
      })
    },

    // 查询按钮
    onSubmit() {
      this.loading = true
      getAction(domain.publicUrl + this.url.list, {
        'token': this.autohor_token,
        'orderType': this.orderType,
        'time': this.formInline.date != null ? this.formInline.date[0] : '',
        'endtime': this.formInline.date != null ? this.formInline.date[1] : '',
        'code': this.formInline.user,
        'pageNo': this.currentPage,
        'status': this.formInline.region,
        'fabricCode': this.fabricCode,
        'emp': this.emp,
        'cusname': this.cusname,
        'companyName': this.companyName
      }).then(res => {
        this.loading = false
        this.pageDetail = res.data.data
        this.tableData = res.data.data.records
      })
    },
    // 订单售后的确定按钮 订单ID，物流单号
    handleSubmit() {
      // 面料订单售后
      if (this.orderType == '3') {
        getAction(domain.publicUrl + this.url.fabricAfter, {
          'token': this.autohor_token, // token
          'orderSn': this.clickOrderSn, // 选中的订单编号
          'number': this.ruleForm.num, // 物流单号
          'reason': this.ruleForm.why, // 售后原因
          'salaryType': this.ruleForm.type // 售后类型 退货还是换货
        }).then(res => {
          if (res.data.code == '0') {
            this.$message.success("申请售后成功！")
          } else {
            this.$message.error("申请售后失败！")
          }
        })
      } else if (this.orderType == 0) {
        // 个订售后********************************************
        getAction(domain.publicUrl + this.url.singleAfter, {
          'token': this.autohor_token, // token
          'orderSn': this.clickOrderSn, // 选中的订单编号
          'number': this.ruleForm.num, // 物流单号
          'reason': this.ruleForm.why, // 售后原因
          'salaryType': this.ruleForm.type // 售后类型 退货还是换货
        }).then(res => {
          if (res.data.code == '0') {
            this.$message.success("申请售后成功！")
          } else {
            this.$message.error("申请售后失败！")
          }
        })
      } else if (this.orderType == 1) {
        // 团订售后***********************************************
        getAction(domain.publicUrl + this.url.teamOrderAfter, {
          'token': this.autohor_token, // token
          'orderSn': this.clickOrderSn, // 选中的订单编号
          'number': this.ruleForm.num, // 物流单号
          'reason': this.ruleForm.why, // 售后原因
          'salaryType': this.ruleForm.type // 售后类型 退货还是换货
        }).then(res => {
          if (res.data.code == '0') {
            this.$message.success("申请售后成功！")
          } else {
            this.$message.error("申请售后失败！")
          }
        })
      }
      // 请求完成之后关闭售后页面
      this.ShouhouVisible = false
      // 刷新页面列表数据
      this.onSubmit()
      this.delAfter()
    },
    // 关闭售后界面
    delAfter() {
      this.ruleForm.why = ""
      this.ruleForm.type = ""
      this.ruleForm.num = ""
    },
    // 点即售后按钮，把订单的基本信息拿到
    fabricAfter(orderSn) {
      this.clickOrderSn = orderSn
    },
    // 点击返修按钮，跳转到返修页面
    fanxiu(orderSn) {
      if (this.orderType == 1) {
        this.$router.push({
          path: '/MyOrderSubsystem/NewAfterSaleOrder4',
          query: {
            sn: orderSn,
            type: this.orderType
          }
        })
      } else if (this.orderType == 0) { // 个订
        this.$router.push({
          path: '/SingleOrderFan',
          query: {
            sn: orderSn,
            type: this.orderType
          }
        })
      }
    },
    // 分页触发请求
    handleCurrentChange(val) {
      this.currentPage = val
      this.onSubmit()
    },
    // 查看面料订单详情 去新的页面
    getFabricDetail(orderSn) {
      this.$router.push({
        path: '/MyOrderSubsystem/OrderDetalisFabric',
        query: {
          order: orderSn
        }
      })
      /*getAction(domain.publicUrl + this.url.fabricDetail, {
          'token': this.autohor_token, // token
          'orderSn': orderSn, // 选中的订单编号
      }).then(res => {
          if (res.data.code == '0') {
              this.fabricOrderDetail = res.data.data.cartInfoList
          }
      })*/
    },
    // 面料订单申请售后，去新的页面
    fabricOrderAafter(orderSn) {
      this.$router.push({
        path: '/MyOrderSubsystem/NewAfterSaleOrder1',
        query: {
          order: orderSn
        }
      })
    },
    // 个订订单详情，去新的页面
    gotoSingleOrderDetail(orderSn) {
      this.$router.push({
        path: '/MyOrderSubsystem/OrderDetalisIndividual',
        query: {
          order: orderSn
        }
      })
    },
    // 团订订单详情，去新的页面
    gotoTeamDetail(orderSn) {
      this.$router.push({
        path: '/MyOrderSubsystem/OrderDetalisGroup',
        query: {
          order: orderSn
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
el-button {
  background-color: #2D2D2D;
  color: #e88f09;
}

.my-order {
  box-sizing: border-box;
  padding: 30px 90px;

  .mo-main {
    background: #fff;
    box-sizing: border-box;
    padding: 20px 40px 30px;

    .mom-pagination {
      text-align: center;
      margin: 35px 0 0;
    }
  }
}

.mytr {
}

.fatitle {
  height: 34px;
  width: 82px;
  /*background: rgb(242 242 242);*/
  text-align: center;
}

.facontent {
  width: 180px;
  overflow: hidden;
  text-align: center;
}

.fabricName {
  margin-left: 10px;
  margin-top: 10px;
  width: auto;
  display: block !important;
  background: #2d2d2d;
  color: #ffe56d;
  text-align: center;
  border-radius: 3px;
}

.fabigtitle {
  height: 34px;
  width: 50%;
  text-align: left;
}

.fabigcontent {
  margin-right: 10px;
  height: 34px;
  width: 50%;
  text-align: center;
}

</style>
<style>
.el-drawer__body {
  overflow-y: auto;
}

</style>
